<template>
	<view>
		<u-sticky offset-top="0">
			<navBarView title="一键开票" :statusBarHeight="statusBarHeight"></navBarView>
		</u-sticky>
		<view class="headerView">
			<view class="searchView flex-row-flex-start">
				<view class="searchLeft flex-row-flex-start">
					<image class="icon" src="/pageE/static/lawOffice_search.png"></image>
					<input class="msgStr" placeholder="输入当事人、律师、案件类型等"/>
				</view>
				<view class="searchBtn">
					搜索
				</view>
			</view>
			<view class="tabs flex-row-center">
				<view class="tabsItem2 flex-row-center">
					<view class="tabsItemText">
						案件类别
					</view>
					<image class="tabsItemIcon" src="/static/login_down.png"></image>
				</view>
				<view class="tabsItem2 flex-row-center">
					<view class="tabsItemText">
						办案律师
					</view>
					<image class="tabsItemIcon" src="/static/login_down.png"></image>
				</view>
				<picker mode="date" :value="caseDateTime" @change="caseDateChange">
					<view class="tabsItem2 flex-row-center">
						<view class="tabsItemText">
							{{caseDateTime?caseDateTime:'日期'}}
						</view>
						<image class="tabsItemIcon" src="/static/login_down.png"></image>
					</view>
				</picker>
			</view>
		</view>
		<view class="listView">
			<view @click="listViewItemClick(index)" class="listViewItem" v-for="index in 10" :key="index">
				<view class="listViewItem1 flex-row-space-between">
					<view class="listViewItem1a">
						2024.09.08 18:00
					</view>
					<view class="listViewItem1a" style="margin-right: 15rpx;">
						贵强律代字006号
					</view>
				</view>
				<view class="listViewItem2">
					<text class="lab">案件类型：</text>刑事辩护
				</view>
				<view class="listViewItem2">
					<text class="lab">当事人：</text>张三
				</view>
				<view class="listViewItem2 flex-row-space-between">
					<view class="listViewItem4a">
						<text class="lab">办案律师：</text>陈凯
					</view>
					<view class="listViewItem4b flex-row-flex-end">
						<view class="listViewItem4b2">
							查看
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		
		onShow() {
			let sysInfo = uni.getSystemInfoSync()
			this.statusBarHeight = sysInfo.statusBarHeight; // 状态栏高度
			this.criminalTypeViewTopHeight = 88+15; // case tyep 距离顶部高度
		},
		data() {
			return {
				statusBarHeight: '',// 状态栏高度 
				caseDateTime:'',
				
			}
		},
		methods: {
			caseDateChange(e){
				this.caseDateTime=e.detail.value
			},
			listViewItemClick(index){
				uni.navigateTo({
					url:'/pageE/officeYiJianKaiPiaoDetail/officeYiJianKaiPiaoDetail'
				})
			}
		}
	}
</script>

<style>
	.faPiaoListViewItem1b{
			margin-right: 24rpx;
			width: 160rpx;
			height: 64rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid;
			border-image: linear-gradient(136deg, rgba(233, 53, 72, 1), rgba(243, 91, 67, 1)) 2 2;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #EB2B3B;
			line-height: 64rpx;
			text-align: center;
		}
		.faPiaoListViewItemType{
			margin-top: 14rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}
		.faPiaoListViewItemTime{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
		.pdfIcon{
			width: 100rpx;
			height: 100rpx;
		}
		.faPiaoListViewItem{
			margin-left: 24rpx;
			margin-top: 20rpx;
			padding-left: 20rpx;
			padding-top: 15rpx;
			padding-bottom: 15rpx;
			width: 682rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.04);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		}
		.faPiaoListView{
			padding-top: 10rpx;
			padding-bottom: 100rpx;
		}
	.listViewItem4b2{
		width: 134rpx;
		height: 52rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #55CD8C;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #55CD8C;
		line-height: 52rpx;
		text-align: center;
		margin-right: 24rpx;
	}
	.listViewItem4b1{
		width: 134rpx;
		height: 52rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #999999;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 52rpx;
		text-align: center;
		margin-right: 24rpx;
	}
	.listViewItem2{
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333;
	}
	.lab{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #666666;
	}
	.listViewItem1a{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.listViewItem{
		margin-left: 24rpx;
		margin-top: 20rpx;
		padding-left: 20rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		width: 682rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.04);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}
	.listView{
		padding-top: 10rpx;
		padding-bottom: 100rpx;
	}
	.tabsItemIcon{
		width: 20rpx;
		height: 10rpx;
	}
	.tabsItemText{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}
	.tabsItem2{
		width: 250rpx;
		height: 98rpx;
		background: #FFFFFF;
	}
	.tabsItem{
		width: 375rpx;
		height: 98rpx;
		background: #FFFFFF;
	}
	.tabs{
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
	}
	.criminalTypeItem{
		margin-left: 1rpx;
		width: 348rpx;
		height: 74rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		line-height: 74rpx;
		text-align: center;
	}
	.criminalTypeView{
		margin-left: 24rpx;
		width: 702rpx;
		height: 80rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background: linear-gradient( to bottom, #E93548 0%, #F35B43 100%);
	}
	.searchBtn{
		margin-left: 16rpx;
	}
	.msgStr{
		margin-left: 14rpx;
		width: 530rpx;
	}
	.icon{
		margin-left: 22rpx;
		width: 32rpx;
		height: 32rpx;
	}
	.searchLeft{
		margin-left: 24rpx;
		width: 612rpx;
		height: 80rpx;
		background: #F5F5F5;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}
	.searchView{
		width: 750rpx;
		height: 128rpx;
	}
	.headerView{
		width: 750rpx;
		background-color: white;
	}
	page{
		background-color: #FAF7F8;
	}

</style>
